<template>
  <div class="main">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">用户管理</el-menu-item>
      <el-menu-item index="2">密钥管理</el-menu-item>
      <el-menu-item index="3">订单管理</el-menu-item>
      <el-menu-item index="4">我的</el-menu-item>
    </el-menu>
    <code-panel v-if="showinfo.showcode">
    </code-panel>
    <user-panel :EditContor=editinfo v-if="showinfo.showuser">
    </user-panel>
    <order-panel :EditContor=editinfo v-if="showinfo.showorder">
    </order-panel>
  </div>
</template>

<script>
  import codePanel from './Code'
  import userPanel from './User'
  import orderPanel from './Order'

  export default {
    data() {
      return {
        activeIndex: "1",
        showinfo: {
          showcode: false,
          showuser: true,
          showorder: false,
        },
        editinfo: {
          orderedit: false,
          uesredit: false,
          codeeidt: true
        }

      }
    },
    components: {
      codePanel,
      userPanel,
      orderPanel
    }
    ,
    methods: {
      handleSelect(key, keyPath) {
        if (key === '1') {
          this.showinfo.showcode = false
          this.showinfo.showorder = false
          this.showinfo.showuser = true
        }
        if (key === '2') {
          console.log('donging')
          this.showinfo.showuser = false
          this.showinfo.showorder = false
          this.showinfo.showcode = true
        }
        if (key === '3') {
          console.log('donging')
          this.showinfo.showuser = false
          this.showinfo.showcode = false
          this.showinfo.showorder = true

        }
        if (key === '4') {
          this.$router.push('/mypage')
        }
      }
    }
  }
</script>
<style scoped>

</style>
